<template>
  <div class="q-pa-md">
    <div class="q-mb-sm">
      <t-badge color="teal"> Model: {{ time }} </t-badge>
    </div>

    <t-btn icon="access_time" round color="primary">
      <t-popup-proxy
        @before-show="updateProxy"
        cover
        transition-show="scale"
        transition-hide="scale"
      >
        <t-time v-model="proxyTime">
          <div class="row items-center justify-end q-gutter-sm">
            <t-btn label="Cancel" color="primary" flat v-close-popup />
            <t-btn
              label="OK"
              color="primary"
              flat
              @click="save"
              v-close-popup
            />
          </div>
        </t-time>
      </t-popup-proxy>
    </t-btn>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const time = ref('10:56');
      const proxyTime = ref('10:56');

      return {
        time,
        proxyTime,

        updateProxy() {
          proxyTime.value = time.value;
        },

        save() {
          time.value = proxyTime.value;
        },
      };
    },
  };
</script>
